﻿<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<LINK rel="Bookmark" href="../images/favicon.ico">
<!-- 本框架基本脚本和样式 -->
<script type="text/javascript"
	src="${path }/resource/js/jquery-2.1.4.min.js"></script>
<link href=" ${path }/resource/plugin/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="${path }/resource/css/document-center.min.css" />

<title></title>
</head>
<body>
<%@ include file="top.jsp"%>
<div class=" content">
      <img class="space-img" src="${path }/resource/images/reception/space-img.png">
      <div class="banner">
        <div class="banner-img">
          <div class="banner-bg">
            
          </div>
        </div>
        <div class="banner-content">
          <div class="banner-title color-w">
            <h1>打破设计的壳</h1>
            <span>罗总叫你做射界</span>
            <div class="author-name color-e">
              罗总
            </div>
          </div>
        </div>
      </div>
      
    </div>
    <!-- 文章列表 -->
    <div class="document-list container-fluid">
    	<div class="row">
        
    		<c:forEach items="${obj}" var="obj">
    			<div class="col-sm-3 box">
		            <a  class="doucment-a" href="${path }/visitor/documentCenter?id=${obj.id}">
		              <img class="document-img" src='${obj.image}'>
		            </a>
		            <div class="document-msg">
		              <a href="www.baidu.com" >
		                <p class="document-name"> ${obj.title}</p>
		              </a>
		              <img src=""><span class="user-name">${obj.articleAuthor}</span><span class="write-time">${obj.createtiem}</span>
		            </div>
	         	</div>
    		</c:forEach>
    	</div>
   		
    </div>
    
    
  </body>
  <script type="text/javascript">
    /*nav*/
      $(function(){
        $(".doucment-nav").addClass("nav-hover");
      })
  	/*图片点击事件*/
  		$(function(){ 			
  			var url;
  			var html1;
  			/*a标签延时一秒跳转播放动画*/
  			$("a").click(function(){
  				 url=$(this).attr("href");
  				 /*alert(url);*/
  				 setTimeout("location.href='"+url+"'",1000);return false;
  			})
  			/*图片点击跳转*/
  			$(".document-img").click(function(){
  				/*清除前面span*/
  				$(".water").remove();
  				//移除动画类 重置动画
  				$(".water").removeClass("water-anmt");
  				/*alert(html1);*/
  				/*判断是否已存在 添加水纹效果span*/
  				
  				html1='<span class="water" id="water"></span>';	
  				$(this).after(html1); 
  				/*alert(html1);*/	  				
  				
  				water(); 			
  			})			
  		})
  	/*水波效果*/
  		function water(){
			/*拿到父类图片的offset对象*/
			var long=$(".water").offsetParent().offset();
			/*取值到相对位置的值*/
			var lf=long.left;
			var top=long.top;
			/*alert(lf+"aa"+top);*/
			/*获取点击坐标*/			 			
  			var e = event || window.event;
            var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
            var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
            var x = e.pageX || e.clientX + scrollX;
            var y = e.pageY || e.clientY + scrollY;
            /*alert('x: ' + x + '\ny: ' + y);*/
            //取到波纹的相对值
            x=x-lf;
            y=y-top;
            /*alert('x: ' + x + '\ny: ' + y);*/
            /*设置波纹的绝对位置*/
            $(".water").css("left",x);
            $(".water").css("top",y);
            /*添加动画类*/
            $(".water").addClass("water-anmt") ;                                  
  		}
  </script>
</html>